<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('basic');
const basicFormRef = ref();
const securityFormRef = ref();
const emailFormRef = ref();
const backupFormRef = ref();

// 基本设置
const basicSettings = reactive({
  systemName: 'Midjourney Proxy 管理系统',
  version: '1.0.0',
  adminEmail: 'admin@example.com',
  description: 'Midjourney Proxy 管理后台系统，提供用户管理、系统监控等功能。',
});

const basicRules = {
  systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
  version: [{ required: true, message: '请输入系统版本', trigger: 'blur' }],
  adminEmail: [
    { required: true, message: '请输入管理员邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
};

// 安全设置
const securitySettings = reactive({
  minPasswordLength: 8,
  maxLoginAttempts: 5,
  sessionTimeout: 120,
  enable2FA: false,
});

const securityRules = {
  minPasswordLength: [
    { required: true, message: '请输入密码最小长度', trigger: 'blur' },
  ],
  maxLoginAttempts: [
    { required: true, message: '请输入最大登录失败次数', trigger: 'blur' },
  ],
  sessionTimeout: [
    { required: true, message: '请输入会话超时时间', trigger: 'blur' },
  ],
};

// 邮件设置
const emailSettings = reactive({
  smtpServer: 'smtp.example.com',
  smtpPort: 587,
  emailAccount: 'noreply@example.com',
  emailPassword: '',
  enableSSL: true,
});

const emailRules = {
  smtpServer: [
    { required: true, message: '请输入SMTP服务器地址', trigger: 'blur' },
  ],
  smtpPort: [{ required: true, message: '请输入SMTP端口', trigger: 'blur' }],
  emailAccount: [
    { required: true, message: '请输入邮箱账号', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
};

// 备份设置
const backupSettings = reactive({
  autoBackup: true,
  backupFrequency: 'daily',
  keepBackups: 30,
  backupPath: '/backup',
});

// 保存基本设置
const saveBasicSettings = () => {
  basicFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('基本设置保存成功');
    }
  });
};

// 重置基本设置
const resetBasicSettings = () => {
  basicSettings.systemName = 'Midjourney Proxy 管理系统';
  basicSettings.version = '1.0.0';
  basicSettings.adminEmail = 'admin@example.com';
  basicSettings.description =
    'Midjourney Proxy 管理后台系统，提供用户管理、系统监控等功能。';
  ElMessage.info('基本设置已重置');
};

// 保存安全设置
const saveSecuritySettings = () => {
  securityFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('安全设置保存成功');
    }
  });
};

// 重置安全设置
const resetSecuritySettings = () => {
  securitySettings.minPasswordLength = 8;
  securitySettings.maxLoginAttempts = 5;
  securitySettings.sessionTimeout = 120;
  securitySettings.enable2FA = false;
  ElMessage.info('安全设置已重置');
};

// 保存邮件设置
const saveEmailSettings = () => {
  emailFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('邮件设置保存成功');
    }
  });
};

// 重置邮件设置
const resetEmailSettings = () => {
  emailSettings.smtpServer = 'smtp.example.com';
  emailSettings.smtpPort = 587;
  emailSettings.emailAccount = 'noreply@example.com';
  emailSettings.emailPassword = '';
  emailSettings.enableSSL = true;
  ElMessage.info('邮件设置已重置');
};

// 测试邮件设置
const testEmailSettings = () => {
  ElMessage.info('邮件测试功能待实现');
};

// 保存备份设置
const saveBackupSettings = () => {
  ElMessage.success('备份设置保存成功');
};

// 重置备份设置
const resetBackupSettings = () => {
  backupSettings.autoBackup = true;
  backupSettings.backupFrequency = 'daily';
  backupSettings.keepBackups = 30;
  backupSettings.backupPath = '/backup';
  ElMessage.info('备份设置已重置');
};

// 手动备份
const manualBackup = () => {
  ElMessage.info('手动备份功能待实现');
};
</script>

<template>
  <div class="settings">
    <h1 class="page-title">系统设置</h1>

    <el-tabs v-model="activeTab" type="border-card">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-form
          ref="basicFormRef"
          :model="basicSettings"
          :rules="basicRules"
          label-width="120px"
        >
          <el-form-item label="系统名称" prop="systemName">
            <el-input
              v-model="basicSettings.systemName"
              placeholder="请输入系统名称"
            />
          </el-form-item>

          <el-form-item label="系统版本" prop="version">
            <el-input
              v-model="basicSettings.version"
              placeholder="请输入系统版本"
            />
          </el-form-item>

          <el-form-item label="管理员邮箱" prop="adminEmail">
            <el-input
              v-model="basicSettings.adminEmail"
              placeholder="请输入管理员邮箱"
            />
          </el-form-item>

          <el-form-item label="系统描述" prop="description">
            <el-input
              v-model="basicSettings.description"
              type="textarea"
              :rows="3"
              placeholder="请输入系统描述"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveBasicSettings">
              保存设置
            </el-button>
            <el-button @click="resetBasicSettings">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-form
          ref="securityFormRef"
          :model="securitySettings"
          :rules="securityRules"
          label-width="120px"
        >
          <el-form-item label="密码最小长度" prop="minPasswordLength">
            <el-input-number
              v-model="securitySettings.minPasswordLength"
              :min="6"
              :max="20"
              placeholder="请输入密码最小长度"
            />
          </el-form-item>

          <el-form-item label="登录失败锁定" prop="maxLoginAttempts">
            <el-input-number
              v-model="securitySettings.maxLoginAttempts"
              :min="3"
              :max="10"
              placeholder="请输入最大登录失败次数"
            />
          </el-form-item>

          <el-form-item label="会话超时时间" prop="sessionTimeout">
            <el-input-number
              v-model="securitySettings.sessionTimeout"
              :min="30"
              :max="1440"
              placeholder="请输入会话超时时间(分钟)"
            />
          </el-form-item>

          <el-form-item label="启用双因素认证" prop="enable2FA">
            <el-switch v-model="securitySettings.enable2FA" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveSecuritySettings">
              保存设置
            </el-button>
            <el-button @click="resetSecuritySettings">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 邮件设置 -->
      <el-tab-pane label="邮件设置" name="email">
        <el-form
          ref="emailFormRef"
          :model="emailSettings"
          :rules="emailRules"
          label-width="120px"
        >
          <el-form-item label="SMTP服务器" prop="smtpServer">
            <el-input
              v-model="emailSettings.smtpServer"
              placeholder="请输入SMTP服务器地址"
            />
          </el-form-item>

          <el-form-item label="SMTP端口" prop="smtpPort">
            <el-input-number
              v-model="emailSettings.smtpPort"
              :min="1"
              :max="65535"
              placeholder="请输入SMTP端口"
            />
          </el-form-item>

          <el-form-item label="邮箱账号" prop="emailAccount">
            <el-input
              v-model="emailSettings.emailAccount"
              placeholder="请输入邮箱账号"
            />
          </el-form-item>

          <el-form-item label="邮箱密码" prop="emailPassword">
            <el-input
              v-model="emailSettings.emailPassword"
              type="password"
              placeholder="请输入邮箱密码"
            />
          </el-form-item>

          <el-form-item label="启用SSL" prop="enableSSL">
            <el-switch v-model="emailSettings.enableSSL" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveEmailSettings">
              保存设置
            </el-button>
            <el-button @click="resetEmailSettings">重置</el-button>
            <el-button type="success" @click="testEmailSettings">
              测试邮件
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 备份设置 -->
      <el-tab-pane label="备份设置" name="backup">
        <el-form
          ref="backupFormRef"
          :model="backupSettings"
          label-width="120px"
        >
          <el-form-item label="自动备份" prop="autoBackup">
            <el-switch v-model="backupSettings.autoBackup" />
          </el-form-item>

          <el-form-item
            v-if="backupSettings.autoBackup"
            label="备份频率"
            prop="backupFrequency"
          >
            <el-select
              v-model="backupSettings.backupFrequency"
              placeholder="请选择备份频率"
            >
              <el-option label="每天" value="daily" />
              <el-option label="每周" value="weekly" />
              <el-option label="每月" value="monthly" />
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="backupSettings.autoBackup"
            label="保留备份数"
            prop="keepBackups"
          >
            <el-input-number
              v-model="backupSettings.keepBackups"
              :min="1"
              :max="100"
              placeholder="请输入保留备份数量"
            />
          </el-form-item>

          <el-form-item label="备份路径" prop="backupPath">
            <el-input
              v-model="backupSettings.backupPath"
              placeholder="请输入备份路径"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="saveBackupSettings">
              保存设置
            </el-button>
            <el-button @click="resetBackupSettings">重置</el-button>
            <el-button type="warning" @click="manualBackup">手动备份</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.settings {
  padding: 20px;
}

.page-title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.el-tabs {
  margin-top: 20px;
}

.el-form {
  max-width: 600px;
  margin-top: 20px;
}
</style>
